<template>
    <div class="app-container">
        <el-form class="lookForm" :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="140px">
            <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设岗部门" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="负责人姓名" prop="fzrName">
                <el-input v-model="queryParams.fzrName" placeholder="请输入负责人姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="指导老师姓名" prop="zdlsName">
                <el-input v-model="queryParams.zdlsName" placeholder="请输入指导老师姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="校区" prop="campusName">
                <el-input v-model="queryParams.campusName" placeholder="请输入校区" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="工作地点" prop="workAddr">
                <el-input v-model="queryParams.workAddr" placeholder="请输入工作地点" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="审核状态" prop="applyStatus">
                <el-select v-model="queryParams.applyStatus" placeholder="请选择审核状态" clearable>
                    <el-option v-for="dict in dict.type.qgzx_apply_status" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="申请时间" prop="applyTime">
                <el-date-picker clearable v-model="queryParams.applyTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择申请时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableData">
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="岗位名称" align="center" prop="postName" />
            <el-table-column label="设岗部门" align="center" prop="deptName" />
            <el-table-column label="设岗人数" align="center" prop="postCount" />
            <el-table-column label="审核状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.qgzx_apply_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />



        <el-dialog title="查看" :visible.sync="lookV" append-to-body fullscreen>
            <el-form class="lookForm" size="mini" ref="applyForm" label-width="148px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="岗位名称" prop="postName">
                            <el-input v-model="lookForm.postName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗部门" prop="deptId">
                            <el-input v-model="lookForm.deptName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="设岗人数" prop="postCount">
                            <el-input v-model="lookForm.postCount" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="负责人" prop="fzrName">
                            <el-input v-model="lookForm.fzrName" readonly />
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="8">
                        <el-form-item label="指导老师" prop="zdlsName">
                            <el-input v-model="lookForm.zdlsName" readonly />
                        </el-form-item>
                    </el-col> -->

                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="zdlsPhone">
                            <el-input v-model="lookForm.zdlsPhone" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬方式">
                            <el-input value="按小时" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="付酬标准">
                            <el-input value="15.00" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="预计金额(元/月/人)" prop="willMoney">
                            <el-input v-model="lookForm.willMoney" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="预计金额合计(元/月)" prop="willMoneyTotal">
                            <el-input readonly v-model="lookForm.willMoneyTotal" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="岗位职责" prop="workNeed">
                            <el-input type="textarea" v-model="lookForm.workNeed" readonly />
                        </el-form-item>
                    </el-col>


                    <el-col :span="24">
                        <el-form-item label="技能要求" prop="skillNeed">
                            <el-input type="textarea" v-model="lookForm.skillNeed" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="每周工作时长" prop="weekTime">
                            <el-input v-model="lookForm.weekTime" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="校区" prop="campusName">
                            <el-input v-model="lookForm.campusName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="工作地点" prop="workAddr">
                            <el-input v-model="lookForm.workAddr" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="岗位类型" prop="postType">
                            <el-input v-model="lookForm.postType" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="lookForm.remark" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请理由" prop="applyReason">
                            <el-input type="textarea" v-model="lookForm.applyReason" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="审核状态" prop="applyStatus">
                            <dict-tag :options="dict.type.qgzx_apply_status" :value="lookForm.applyStatus" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="!isEmpty(lookForm.returnMsg)">
                        <el-form-item label="驳回理由" prop="returnMsg">
                            <el-input type="textarea" v-model="lookForm.returnMsg" readonly />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <hr />
            <el-steps :active="getStep(lookForm)">
                <el-step title="部门制表人申请岗位" description=""></el-step>
                <el-step title="部门领导审批" :status="isEmpty(lookForm.deptCmt) ? 'wait' : getStepStatus(lookForm.deptCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.deptNoName) ? '' : lookForm.deptNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.deptCmt) ? '' : lookForm.deptCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.deptTime) ? '' : lookForm.deptTime }}
                        </div>
                    </template>
                </el-step>
                <el-step title="资助办领导审批" :status="isEmpty(lookForm.highCmt) ? 'wait' : getStepStatus(lookForm.highCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.highNoName) ? '' : lookForm.highNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.highCmt) ? '' : lookForm.highCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.highTime) ? '' : lookForm.highTime }}
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <hr />
            <el-form label-width="148px" size="mini">
                <el-row>
                    <el-col :span="8" v-if="!isEmpty(lookForm.deptCmt)">
                        <el-form-item label="部门意见">
                            <el-radio-group v-model="lookForm.deptCmt" disabled>
                                <el-radio :label="'同意'">同意</el-radio>
                                <el-radio :label="'拒绝'">拒绝</el-radio>
                                <el-radio :label="'驳回'">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="部门签章" v-if="lookForm.deptSign">
                            <img :src="baseurl + lookForm.deptSign" width="200px" height="50px">
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="!isEmpty(lookForm.deptCmt)">
                        <el-form-item label="资助办意见">
                            <el-radio-group v-model="lookForm.highCmt" disabled>
                                <el-radio :label="'同意'">同意</el-radio>
                                <el-radio :label="'拒绝'">拒绝</el-radio>
                                <el-radio :label="'驳回'">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="资助办签章">
                            <img :src="baseurl + lookForm.highSign" width="200px" height="50px">
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>


    </div>
</template>
<script>

import { listHighAll as listOwnApply } from "@/api/workstudy/post";

import { isEmpty } from "@/api/helpFunc";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


import TeacherSelect from '@/views/components/TeacherSelect/index';



export default {
    name: "workstudy-apply",
    components: { Treeselect, TeacherSelect },
    dicts: ['qgzx_apply_status'],
    data() {
        return {
            isEmpty,
            loading: false,
            total: 0,
            tableData: [],

            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null,
            },

            lookV: false,
            lookForm: {},


            baseurl: process.env.VUE_APP_BASE_API + "/",


        }

    },
    created() {
        this.getList();
    },
    methods: {

        //此方法用于判断步骤条当前步骤的状态
        getStepStatus(data) {
            if (data == "同意") {
                return 'success';
            } else {
                return 'error';
            }
        },

        //此方法用于判断步骤条到哪个步骤了
        getStep(data) {
            if (!isEmpty(data.highCmt)) { //判断资助办领导有没有审批
                return 3;
            } else if (!isEmpty(data.deptCmt)) { //判断部门领导有没有审批
                return 2;
            } else {
                return 1;
            }
        },

        handleExport() {
            this.download('workstudy/post/doExport', {
                ...this.queryParams
            }, `勤工助学岗位_${new Date().getTime()}.xlsx`)
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        lookVClick(row) {
            this.lookForm = {};
            this.lookForm = { ...row };
            this.lookV = true;
        },

        async getList() {
            this.loading = true;
            let res = await listOwnApply(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }
        },

        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children,
            };
        }
    }
}


</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>